<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    {include file="/layout/scriptload"}
    <title>已绑定公众号列表</title>
</head>
<body>
<div id="app">
    <el-container>
        <el-main>
            <el-row>
                <el-col :span="6" style="margin-right: 10px;">
                    <el-input v-model="keyword" placeholder="昵称丶原始ID">
                        <el-button @click="get_list()" slot="append" icon="el-icon-search"></el-button>
                    </el-input>
                </el-col>
                <el-col :span="12">
                    <el-button @click="refresh()" type="primary" icon="el-icon-refresh"></el-button>
                    <el-button @click="add_account()" type="primary">添加公众号</el-button>
                    <el-button-group>
                        <el-button type="info" @click="all_openid_num()">已收集用户数</el-button>
                        <el-button type="info" @click="all_suc_num()">上次发送成功数</el-button>
                    </el-button-group>
                </el-col>
                <el-col :span="3">
                    <el-button-group>
                        <el-button type="danger" @click="del_account()">删除</el-button>
                        <el-button type="warning" @click="clear_account()">清空</el-button>
                    </el-button-group>
                </el-col>
            </el-row>
            <el-row>
                <el-table :data="table_data" border stripe v-loading="loading" style="margin-top: 10px;"
                          ion-change="handle_selection_change">
                    <el-table-column type="selection" width="120" label="全选"></el-table-column>
                    <el-table-column prop="name" label="账号昵称" width="220"></el-table-column>
                    <el-table-column prop="ghid" label="原始id" width="220"></el-table-column>
                    <el-table-column prop="scan_phone" label="扫码手机" width="180"></el-table-column>
                    <el-table-column prop="category" label="一级分类" width="180"></el-table-column>
                    <el-table-column prop="category2" label="二级分类" width="180"></el-table-column>
                </el-table>
                <div style="text-align: center; margin-top: 10px;">
                    <el-pagination background layout="total, sizes, prev, pager, next" :total="total"
                                   :page-sizes="[10, 15, 20, 50]" :page-size="pagesize" @size-change="size_change"
                                   @current-change="current_change"></el-pagination>
                </div>
            </el-row>
        </el-main>
    </el-container>
</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            msgid: {$msgid}, // 消息id
            loading: false,
            keyword: '',
            ghids: [], // 选中状态
            table_data: [], // 表格数据
            pagesize: 10, // 每页展示的数量
            total: 0, // 数据总数
            page: 1, // 当前页码
        },
        methods: {
            // 页码切换
            current_change(page) {
                this.page = page;
                this.get_list();
            },
            // 每页展示切换
            size_change(val) {
                this.pagesize = val;
                this.get_list();
            },
            // 获取数据
            get_list() {
                var that = this;
                that.loading = true;
                $.ajax({
                    type: 'post',
                    cache: false,
                    url: '{:url("customer/get_account_list")}',
                    data: {page: that.page, pagesize: that.pagesize, keyword: that.keyword, msgid: that.msgid},
                    success: function (res) {
                        if (res.code == 0) {
                            that.table_data = res.data.list;
                            that.total = res.data.total;
                        } else {
                            that.table_data = [];
                            that.total = 0;
                        }
                        that.loading = false;
                    },
                    error: function () {
                        that.loading = false;
                        that.$message.error('发生系统错误,请与管理员联系！');
                    }
                });
            },
            // 刷新数据
            refresh() {
                this.keyword = '';
                this.get_list();
            },
            // 选中ghid
            selection_change(val) {
                arr = [];
                val.forEach(function (item) {
                    arr.push(item.ghid);
                });
                this.ghids = arr;
            },
            // 添加账号
            add_account() {
                url = "{:url('customer/add_account_view')}" + "?msgid=" + this.msgid;
                layerWindow('添加账号', url, '90%', '90%');
            },
            // 删除账号
            del_account() {
                var that = this;
                if (that.ghids.length) {
                    that.$confirm('此操作将删除绑定账号,是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        $.ajax({
                            type: 'post',
                            cache: false,
                            url: '{:url("customer/do_del_account")}',
                            data: {ghids: that.ghids, msgid: that.msgid},
                            success: function (res) {
                                if (res) {
                                    that.$message({
                                        type: 'success',
                                        message: '删除成功!'
                                    });
                                    that.refresh();
                                } else {
                                    that.$message.error('删除失败');
                                }
                            },
                            error: function () {
                                that.$message.error('发生系统错误,请与管理员联系！');
                            }
                        });
                    });
                } else {
                    that.$message.error('至少选择一个账号');
                }
            },
            // 清空账号
            clear_account() {
                var that = this;
                that.$confirm('清除全部已绑定账号?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'danger'
                }).then(() => {
                    $.ajax({
                        type: 'post',
                        cache: false,
                        url: '{:url("customer/do_clear_account")}',
                        data: {msgid: that.msgid},
                        success: function (res) {
                            if (res) {
                                that.$message({
                                    type: 'success',
                                    message: '清空成功!'
                                });
                                that.refresh();
                            } else {
                                that.$message.error('清空失败');
                            }
                        },
                        error: function () {
                            that.$message.error('发生系统错误,请与管理员联系！');
                        }
                    });
                });
            },
            // 获取已收集用户数
            all_openid_num() {
                $.ajax({
                    cache: false,
                    url: "{:url('/wechat/openid/get_all_openid_num/msgid/')}" + this.msgid,
                    type: 'get',
                    success: function (data) {
                        layerAlert('已收集<span style="color: red;">' + data + '</span>名用户');
                    },
                    error: function () {
                        layerAlert('系统错误，请联系管理员');
                    }
                });
            },
            // 获取上次发送成功数
            all_suc_num() {
                $.ajax({
                    cache: false,
                    url: "{:url('/wechat/openid/get_all_suc_num/msgid/')}" + this.msgid,
                    type: 'get',
                    success: function (data) {
                        layerAlert('<span style="color: red;">' + data + '</span>个成功');
                    },
                    error: function () {
                        layerAlert('系统错误，请联系管理员');
                    }
                });
            }
        }
    });
    vm.get_list();
</script>
</html>